import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { propType, filter } from 'graphql-anywhere';
import { StyleSheet, View } from 'react-native';
import { List, ListItem, Button, Text } from 'react-native-elements';
import { primaryColor } from '../utils';

const styles = StyleSheet.create({
  list: {
    marginTop: 0
  },
  header: {
    padding: 8
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end'
  },
  subtitle: {
    color: '#86939e',
    fontSize: 15.24,
    marginTop: 1,
    fontWeight: 'bold'
  }
});

const OrderShipping = ({selectNote, updateNote, chinese, onUpdateDate, onUpdateAddress, onUpdateContact, onUpdateNote,
  localTitle, shipping: {title, canUpdate, address, unitNumber,
  postalCode, displayDate, contact, contactName, express, flexible, note}}) => {
  return (
    <View>
      <Text style={styles.header}>{title||localTitle}</Text>
      <List containerStyle={styles.list}>
        <ListItem hideChevron={!canUpdate} leftIcon={{name:'access-time'}}
          title={`${displayDate} ${express?'[Express]':''}`} titleNumberOfLines={4}
          subtitle={
            <View>
              {flexible?<Text style={styles.subtitle}>{flexible?(chinese?`允许我们在此时间区间前提前最多2小时到`:`Allow us to come up to 2 hours earlier before this time range`):null}</Text>:null}
              <Text style={styles.subtitle}>{chinese?'时间':'Date'}</Text>
            </View>
          } onPress={canUpdate?onUpdateDate:null}/>
        <ListItem hideChevron={!canUpdate} leftIcon={{name:'location-on'}}
          title={`${unitNumber||''} ${address||''} ${postalCode}`} titleNumberOfLines={4}
          subtitle={chinese?'地址':'Address'} onPress={canUpdate?onUpdateAddress:null}/>
        <ListItem hideChevron={!canUpdate} leftIcon={{name:'phone'}}
          title={contactName} titleNumberOfLines={4}
          subtitle={chinese?'联系方式':'Contact'} onPress={canUpdate?onUpdateContact:null}/>
        <ListItem hideChevron={!canUpdate&&!updateNote} leftIcon={{name:'event-note'}}
          title={selectNote||note||(chinese?'(未选择)':'(Unselected)')} titleNumberOfLines={4}
          subtitle={onUpdateNote?(chinese?'点击选择留言':'Click to select note'):(chinese?'留言':'Note')}
          onPress={(updateNote||canUpdate)?onUpdateNote:null}/>
      </List>
    </View>
  );
}

OrderShipping.fragments = {
  shipping: gql`
    fragment OrderShipping on OrderShipping {
      title
      canUpdate
      address
      unitNumber
      postalCode
      displayDate
      contact
      contactName
      note
      express
      flexible
    }
  `
};

OrderShipping.propTypes = {
  shipping: propType(OrderShipping.fragments.shipping).isRequired
};

export default OrderShipping;
